<template>
  <div class="big">
    <el-container>
      <el-header>
        <div class="header">
          <a  class="a" href=""><img src="https://stormsend1.djicdn.com/stormsend/uploads/d0425c20-9482-0136-3d9f-12528100fbe3/logo.svg" alt="">
            <a style="text-decoration: none;display:inline-block;font-size:20px;margin-left: 7px" href=""><b>商城</b></a>  </a>

          <div style="margin-right: 100px" >
            <img style="position: absolute;width: 25px;height: 25px;margin-left: 970px;margin-top: 20px" src="https://asset1.djicdn.com/uploads/avatars/thumb_d1dd699b-04c9-4909-b208-d43ba5b5a25b.png" alt="">
            <el-dropdown class="dropdown">
  <span class="el-dropdown-link">
    我的账号<i class="el-icon-arrow-down el-icon--right"></i>
  </span>

              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>我的账号</el-dropdown-item>
                <el-dropdown-item>我的订单</el-dropdown-item>
                <el-dropdown-item>退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown >
              <el-divider direction="vertical"></el-divider>
              <span class="link">
    中文<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>中文</el-dropdown-item>
                <el-dropdown-item>English</el-dropdown-item>
                <el-dropdown-item>Français</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>

      </el-header>


      <el-main>

        <div style="background: #f0f1f2;width: 1500px;height: 900px;margin-left:0;overflow: hidden">
          <div style="float: left;width: 250px;height: 400px">
            <div style="width: 1200px;height: 72px">
              <a style="line-height: 72px;margin-left: 80px" href="">首页</a>
            </div>
            <div style="width: 200px;height: 352px;background-color: white;margin-left: 10px;float: left">
              <el-row class="tac">
                <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose">
                  <el-menu-item index="1">
                    <i class="el-icon-user"></i>
                    <span slot="title">账户信息</span>
                  </el-menu-item>
                  <el-menu-item index="2">
                    <i class="el-icon-s-order"></i>
                    <span slot="title">我的订单</span>
                  </el-menu-item>
                  <el-menu-item index="3" >
                    <i class="el-icon-s-ticket"></i>
                    <span slot="title">我的优惠券</span>
                  </el-menu-item>
                  <el-menu-item index="4">
                    <i class="el-icon-coin"></i>
                    <span slot="title">我的DJ币</span>
                  </el-menu-item>
                  <el-menu-item index="5">
                    <i class="el-icon-location-outline"></i>
                    <span slot="title">我的收货地址</span>
                  </el-menu-item>
                </el-menu>
              </el-row>
            </div>
          </div>

          <div style="width: 1100px;height: 800px;overflow: hidden">
            <div style="width: 1000px;height: 250px;float:left ;margin-left: 100px;margin-top: 80px;overflow: hidden">
              <div style="width: 400px;height: 230px;background-color: white;float: left">
                <img src="https://asset1.djicdn.com/uploads/avatars/thumb_d1dd699b-04c9-4909-b208-d43ba5b5a25b.png"
                     style="float: left;width: 80px;height: 80px;margin-top: 30px;margin-left: 40px" alt="">
                <h2 style="float: left;margin-top: 50px;margin-left: 15px">用户名</h2>
                <div style="width: 210px;height: 32px;float: left">
                  <i class="el-icon-phone"></i>
                  <span>199****2082</span>
                </div>
                <div style="float: left;width: 210px;height: 50px;margin-left: 135px;margin-top: 10px;font-size: 15px">
                  <a style="color: #1890FF" href="">修改密码 ></a>
                </div>
              </div>
              <div style="width:500px;height: 210px;background-color: white;float: left;margin-left: 20px;padding-left: 50px;padding-top: 20px ">
                <div>
                  <p >我的可用 DJI 币</p>
                  <h2>￥0.00</h2>
                  <p>¥0.00 即将可用</p>
                  <a style="font-size: 15px;color: #1890FF" href=""> <p>我的 DJI 币记录 ></p></a>
                </div>



              </div>
            </div>
            <div style="width:970px;height: 890px;background-color: white;float: left;margin-left: 100px ">
              <p style="font-size: 30px;margin-left: 40px">最近订单</p>
              <div style="width: 150px;height: 150px;margin-left: 400px">
                <img style="width: 100%" src=""></img>
                <p style="font-size: 25px;margin-left: 25px;margin-top: 10px"> 暂无订单</p>
              </div>
              <el-button class="button" type="primary">去选购</el-button>

            </div>

          </div>



        </div>













        <div class="qcby" >
          <div class="by">
            <img style="margin-left: 40px" src="https://stormsend1.djicdn.com/stormsend/uploads/794e0300-98af-0136-ac4e-1237445f15bc/truck-moving.svg" alt="">
            <p>全场满 ¥99 包邮</p>
          </div>
          <div class="pay">
            <img style="margin-left: 80px" src="https://stormsend1.djicdn.com/stormsend/uploads/7bab98b0-98af-0136-ac4f-1237445f15bc/credit-card.svg" alt="">
            <p>支持支付宝、微信、银联、银行转账 <br>
              支持花呗、京东白条和招行分期</p>
          </div>

        </div>
        <el-divider/>
        <div style="margin:0 auto">
          <div style="font-size: 12px;float: left" >
            <p>热门产品分类</p>
            <a href=""> <p>航拍无人机</p></a>
            <a href=""> <p>手持拍摄设备</p></a>
            <a href=""> <p>商用产品及方案</p></a>
            <a href=""> <p>增值服务</p></a>
          </div>
          <div style="font-size: 12px;float: left;margin-left: 300px" >
            <p>帮助与支持</p>
            <a href=""> <p>支付方式</p></a>
            <a href=""> <p>订单帮助</p></a>
            <a href=""> <p>发货和物流</p></a>
            <a href=""> <p>技术支持</p></a>
            <a href=""> <p>维修中心</p></a>
            <a href=""> <p>售后服务政策</p></a>
          </div>
          <div style="font-size: 12px;float: left;margin-left: 300px" >
            <p>商城项目</p>
            <a href=""> <p>Dji币返利计划</p></a>
            <a href=""> <p>以旧换新</p></a>
            <a href=""> <p>Dji大疆官网商城APP</p></a>

          </div>
          <div style="font-size: 12px;float: left;margin-left: 300px" >
            <p>探索精彩大疆</p>
            <a href=""> <p>天空之城</p></a>
            <a href=""> <p>Dji大疆社区</p></a>
            <a href=""> <p>购机指南</p></a>
            <a href=""> <p>安全飞行指引</p></a>
            <a href=""> <p>环球飞行指南</p></a>
          </div>
        </div>

      </el-main>

    </el-container>

  </div>

</template>

<script>
export default {
  name: "ProductView.vue",
  data:function (){
    return {


    }
  }
}
</script>


<style >

.button{margin-top: 100px;margin-left: 390px;width: 180px;height:50px;font-size: 22px }

a{ text-decoration: none}

.divider{width: 1653px;height: 64px}

.big{ overflow:hidden;margin:0 100px 0 200px;width: 1600px;}
.header{height: 64px;margin-bottom: 20px}
.a{
  text-decoration: none; overflow:hidden;line-height: 60px;display: flex;float: left;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;}

.link {
  cursor: pointer;
  color: #409EFF;

}
.el-icon-arrow-down {
  font-size: 12px;
}
.dropdown{

  margin-top: 20px;
  margin-left: 1000px;
}
.h1{height: 42px;font-size: 32px}
.qcby{overflow: hidden}
.by{float: left;margin-left: 400px;}
.pay{float: left;margin-left: 500px}
</style>
